{extends file="layout.tpl"}
{block name="content"}
<!--START CONTENT-->
{if !empty($data_slider)}
<section id="slider"><!--slider-->
	<div class="container">
		<div class="row">
			<div class="col-sm-12">
				<div id="slider-carousel" class="carousel slide" data-ride="carousel">
					{assign var="active" value=""}
					<ol class="carousel-indicators">
						{for $item=0 to $data_slider|@count - 1}
							{if $item == 0}
								{assign var="active" value="active"}
							{else}
								{assign var="active" value=""}
							{/if}
							<li data-target="#slider-carousel" data-slide-to="{$item}" class="{$active}"></li>
						{/for}
					</ol>
					<div class="carousel-inner">
						{for $item=0 to $data_slider|@count - 1}
							{if $item == 0}
							{assign var="active" value="active"}
							{else}
								{assign var="active" value=""}
							{/if}
							<div class="item {$active}">
								<div class="col-sm-6">
									<a href='{$data_slider[$item].link}'>
										<h1>{$data_slider[$item].title}</h1>
										<p>{$data_slider[$item].introtext|truncate:160:"...":true}</p>
									</a>
									<a href='{$data_slider[$item].link}' class="btn btn-default">Nấu ngay</a>
								</div>
								<div class="col-sm-6">
									<a href='{$data_slider[$item].link}'>
										<img src="{url path=$data_slider[$item].image1}" class="girl img-responsive" alt="{$data_slider[$item].title}" />
									</a>
								</div>
							</div>
						{/for}
					</div>
					<a href="#slider-carousel" class="left control-carousel hidden-xs" data-slide="prev">
						<i class="fa fa-angle-left"></i>
					</a>
					<a href="#slider-carousel" class="right control-carousel hidden-xs" data-slide="next">
						<i class="fa fa-angle-right"></i>
					</a>
				</div>
			</div>
		</div>
	</div>
</section><!--/slider-->
{/if}
<section>
	<div class="container">
		<div class="row">
			<div class="col-sm-3">
				<div class="left-sidebar">
					<h2>Danh mục</h2>
					<!--category-productsr-->
					{include 'box/box_categories.tpl'}
					<!--/category-productsr-->
					<div class="brands_products"><!--brands_products-->
						<h2>Cách nấu</h2>
						{include 'box/box_categories_style.tpl'}
					</div><!--/brands_products-->
					<div class="shipping text-center"><!--shipping-->
						<img src="./images/banner/shipping.jpg" alt="MonGiNgon.vn" />
					</div><!--/shipping-->
				</div>
			</div>
			<div class="col-sm-9 padding-right">
				{if $data_feature|@count gt 0}
				<div class="features_items"><!--features_items-->
					<h2 class="title text-center">Món ngon đặc sắc</h2>
					{foreach $data_feature as $d => $dish}
					<div class="col-sm-4">
						<div class="product-image-wrapper">
							<div class="single-products">
								<div class="productinfo text-center">
									<a href="{$dish.link}">
										<img src="{$dish.image1}" alt="{$dish.title}"/>
										<h2 class="features_title">{$dish.title}</h2>
										<p>{$dish.introtext|truncate:140:"...":true}</p>
									</a>
									<a href="{$dish.link}" class="btn btn-default add-to-cart"><i class="fa fa-hand-o-up"></i> Nấu ngay</a>
								</div>
							</div>
							<div class="choose">
								<ul class="nav nav-pills nav-justified">
									<li>
										<a href="javascript:void(0)">
											<div class="rating">
												<i class="fa fa-star-o"></i>
												<i class="fa fa-star-o"></i>
												<i class="fa fa-star-o"></i>
												<i class="fa fa-star-o"></i>
												<i class="fa fa-star-o"></i>
											</div>
										</a>
									</li>
									<li><a href="javascript:void(0)"><i class="fa fa-comment"></i> Bình luận</a></li>
								</ul>
							</div>
						</div>
					</div>
					{/foreach}
				</div><!--features_items-->
				{/if}
				{if $data_tab|@count gt 0}
				<div class="category-tab"><!--category-tab-->
					<div class="col-sm-12">
						<ul class="nav nav-tabs">
						{foreach from=$data_tab key=k item=v}
							{if $v.sub|@count gt 4}
								<li {if $v@first} class="active"{/if}>
									<a href="#{$v.alias}" data-toggle="tab">{$v.name}</a>
								</li>
							{/if}
						{/foreach}
						</ul>
					</div>
					<div class="tab-content">
						{foreach from=$data_tab key=k item=v}
							{if $v.sub|@count gt 4}
							<div class="tab-pane fade {if $v@first} active{/if} in" id="{$v.alias}" >
								{foreach from=$v.sub item=dish}
								<div class="col-sm-3">
									<div class="product-image-wrapper">
										<div class="single-products">
											<div class="productinfo text-center style2">
												<a href="{$dish.link}">
													<img src="{$dish.image1}" class="image-small" alt="{$dish.title}" />
													<h2 >{$dish.title}</h2>
												</a>
												<a href="{$dish.link}" class="btn btn-default add-to-cart"><i class="fa fa-hand-o-up"></i> Nấu ngay</a>
											</div>
										</div>
									</div>
								</div>
								{/foreach}
							</div>
							{/if}
						{/foreach}
					</div>
				</div><!--/category-tab-->
				{/if}
				
				{if $data_random|@count gt 0}
				<div class="recommended_items"><!--recommended_items-->
					<h2 class="title text-center">Gợi Ý Món Ngon</h2>
					<div id="recommended-item-carousel" class="carousel slide" data-ride="carousel">
						<div class="carousel-inner">
							{foreach from=$data_random key=k item=v}
								{if $v@first}
								<div class="item active">
								{elseif {math equation="x % 3" x= $k} == 0}
								</div>
								<div class="item">
								{/if}
								<div class="col-sm-4">
									<div class="product-image-wrapper">
										<div class="single-products">
											<div class="productinfo text-center">
												<a href="{$v.link}">
													<img src="{$v.image1}" alt="{$v.title}" />
													<h2 >{$v.title}</h2>
												</a>
												<a href="{$v.link}" class="btn btn-default add-to-cart"><i class="fa fa-hand-o-up"></i> Nấu ngay</a>
											</div>
										</div>
									</div>
								</div>
								{if $v@last}
								</div>
								{/if}
							{/foreach}
						</div>
						<a class="left recommended-item-control" href="#recommended-item-carousel" data-slide="prev">
							<i class="fa fa-angle-left"></i>
						</a>
						<a class="right recommended-item-control" href="#recommended-item-carousel" data-slide="next">
							<i class="fa fa-angle-right"></i>
						</a>
					</div>
				</div><!--/recommended_items-->
				{/if}
			</div>
		</div>
	</div>
</section>
<!--END CONTENT-->
{/block}